<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅行才更美</title>
    <link rel="stylesheet" href="css/index/index.css">
</head>
<body>
<!--1.引入头部header.html-->
<div id="header"></div>
<!--banner的轮播------------------------------------------------------->
<div id="banner">
    <!-- 图片区域 -->
    <ul class="banner-img" data-load="bannerImgs">

    </ul>
    <!--左右方向按钮-->
    <a href="javascript:;" class="ck-slide ck-left" data-move="left"></a>
    <a href="javascript:;" class="ck-slide ck-right" data-move="right"></a>
    <!--导航小圆点-->
    <ul class="indicators" data-load="bannerInds">
        <!-- <li></li> -->
    </ul>
</div>
<!--中间第一模块-------------------------------------------------->
<div class="middle_about floor" id="f1">
    <div class="about">
        <h3>上帝视角</h3>
        <p>A private trip for you</p>
        <span> </span>
    </div>
    <div class="about_bottom">
        <div>
            <img src="images/index/weather.png">
            <h3><a href="#">近几周天气</a></h3>
            <p>涂擦SPF大于15、PA+防晒护肤品,无明显降温,感冒机率较低,无雨且风力较小，
                易保持清洁度,易感人群应适当减少室外
            </p>
        </div>
        <div>
            <img src="images/index/weather2.png">
            <h3><a href="#">相关书籍</a></h3>
            <p>朋友，你要知道旅行是一件很浪漫的事情。试着去想像一下金色的沙滩碧蓝的大海
                还有高山的青绿和田野间的夕阳。如诗如画，你可以没有很多很多的故事，但一定要与心爱的人
                来一次浪漫的旅行
            </p>
        </div>
        <div>
            <img src="images/index/weather3.png">
            <h3><a href="#">驴友推荐</a></h3>
            <p>墨脱曾经因为闭塞而被披上了一层神秘面纱，这里的雪山、云雾、林海、瀑布、深谷、激流及淳朴善良的门巴、
                珞巴族，构成了人们戏中的香格里拉
            </p>
        </div>
    </div>
</div>
<!--中间的第二模块------------------------------------------------>
<div class="middle_about2 floor">
    <div class="about">
        <h3>走过的路,路过的彩虹</h3>
        <p>A private trip for you</p>
        <span> </span>
    </div>
    <div class="list1  ">
       <div class="port-6">
           <img src="images/index/pic1.jpg"/>
           <div class="text-desc">
               <h3>总监 : 大海</h3>
               <p>每年夏天我会回到圣托里尼,制作浓烈的Raki酒，花园每天也要去整理，
                   橄榄也是要摘的，到了晚上，还会去那家约好的餐厅弹奏钢琴，餐厅的味道嘛，我可从来都不推荐给谁。</p>
           </div>
       </div>
        <div>
            <p>1</p>
            <p>step</p>
        </div>
        <div>
            <h3><a href="#">Step 1: Heading Here</a></h3>
            <p>你说的那个是什么的我也不知道对着着里的介绍</p>
        </div>
    </div>
    <div class="list2">
        <div class="port-6">
            <img src="images/index/pic2.jpg"/>
            <div class="text-desc2">
                <h3>总监 : 大海</h3>
                <p>每年夏天我会回到圣托里尼,制作浓烈的Raki酒，花园每天也要去整理，
                    橄榄也是要摘的，到了晚上，还会去那家约好的餐厅弹奏钢琴，
                    餐厅的味道嘛，我可从来都不推荐给谁。
                </p>
            </div>
        </div>
        <div>
            <p>2</p>
            <p>step</p>
        </div>
        <div>
            <h3><a href="#">Step 1: Heading Here</a></h3>
            <p>你说的那个是什么的我也不知道对着着里的介绍</p>
        </div>

    </div>
    <div class="list1">
        <div class="port-6">
            <img src="images/index/pic3.jpg"/>
            <div class="text-desc">
                <h3>总监 : 大海</h3>
                <p>每年夏天我会回到圣托里尼,制作浓烈的Raki酒，花园每天也要去整理，
                    橄榄也是要摘的，到了晚上，还会去那家约好的餐厅弹奏钢琴，餐厅的味道嘛，我可从来都不推荐给谁。</p>
            </div>
        </div>
        <div>
            <p>3</p>
            <p>step</p>
        </div>
        <div>
            <h3><a href="#">Step 1: Heading Here</a></h3>
            <p>你说的那个是什么的我也不知道对着着里的介绍</p>
        </div>
    </div>
    <div class="list2">
        <div class="port-6">
            <img src="images/index/pic4.jpg"/>
            <div class="text-desc2">
                <h3>总监 : 大海</h3>
                <p>每年夏天我会回到圣托里尼,制作浓烈的Raki酒，花园每天也要去整理，
                    橄榄也是要摘的，到了晚上，还会去那家约好的餐厅弹奏钢琴，餐厅的味道嘛，我可从来都不推荐给谁。</p>
            </div>
        </div>
        <div>
            <p>4</p>
            <p>step</p>
        </div>
        <div>
            <h3><a href="#">Step 1: Heading Here</a></h3>
            <p>你说的那个是什么的我也不知道对着着里的介绍</p>
        </div>
    </div>


</div>
<!--中间的第三模块------------------------------------------------>
<div class="middle_about3 floor">
    <div class="about about3">
        <h3>夕阳，古道，窗前，吉他</h3>
        <p>A private trip for you</p>
        <span> </span>
    </div>
    <div class="footer_img">
        <div class="img_one">
            <img src="images/index/dali.jpg">
            <div class="overlay">
                <h2>大理</h2>
                <a class="info" href="#">风·花·雪·月</a>
            </div>
        </div>
        <div class="img_two">
            <img class="img-responsive" src="images/index/p11.jpg" alt="">
            <div class="overlay">
                <h2>巴黎</h2>
                <a class="info" href="#">当你坐落在巴黎那一天，我的心随着你坐落在了那个地方。</a>
            </div>
        </div>
        <div class="img_three">
            <img class="img-responsive" src="images/index/p3.jpg" alt="">
            <div class="overlay">
                <h2>爱琴海</h2>
                <p>
                    <a href="#">我们恋爱吧</a>
                </p>
            </div>
        </div>
        <div class="img_four">
            <img class="img-responsive" src="images/index/p13.jpg" alt="">
            <div class="overlay">
                <h2>稻城亚丁</h2>
                <a class="info" href="#">有一个地方叫做稻城</a>
            </div>
        </div>
    </div>
    <div class="footer_img">
        <div class="img_five">
            <img class="img-responsive" src="images/index/p20.jpg" alt="">
            <div class="overlay">
                <h2>青海</h2>
                <a class="info" href="#">尽情享受金色的海洋</a>
            </div>
        </div>
        <div class="img_six">
            <img class="img-responsive" src="images/index/cac.jpg" alt="">
            <div class="overlay">
                <h2>丽江古城</h2>
                <p>
                    <a href="#">我在丽江等你</a>
                </p>
            </div>
        </div>
        <div class="img_seven">
            <img class="img-responsive" src="images/index/p4.jpg" alt="">
            <div class="overlay">
                <h2>卡帕多西亚</h2>
                <p>
                    <a href="#">天边的热气球，在辽阔里，斑斓飘逸，令我惊艳，乘坐一次，便念一生一世。</a>
                </p>
            </div>
        </div>
        <div class="img_eight">
            <img class="img-responsive" src="images/index/p.jpg" alt="">
            <div class="overlay">
                <h2>罗赖马山</h2>
                <a class="info" href="#">鬼斧神工的奇迹</a>
            </div>
        </div>

    </div>
    <div class="footer_img">

        <div class="img_nine">
            <img class="img-responsive" src="images/index/p23.jpg" alt="">
            <div class="overlay">
                <h2>长白山</h2>
                <a class="info" href="#">不仅在清，不仅在净，更在于雅和秀</a>
            </div>
        </div>
        <div class="img_ten">
            <img class="img-responsive" src="images/index/p26.jpg" alt="">
            <div class="overlay">
                <h2>忆水江南</h2>
                <p>
                    <a href="#">你梦里到过的地方</a>
                </p>
            </div>
        </div>
        <div class="img_eleven">
            <img class="img-responsive" src="images/index/p18.jpg" alt="">
            <div class="overlay">
                <h2>挪威</h2>
                <a class="info" href="#">你看到的颜色，可不一定是彩虹</a>
            </div>
        </div>
        <div class="img_twelve">
            <img class="img-responsive" src="images/index/p10.jpg" alt="">
            <div class="overlay">
                <h2>西藏</h2>
                <a class="info" href="#">洁白的哈达送给最纯净的你</a>
            </div>
        </div>
    </div>
</div>

<!--滚动事件模块----------------------------------------------------->
<div id="lift">
    <ul class="lift_list">
        <li class="lift_item">
            <a href="#" class="lift_btn">
                <span>上帝视角</span>
            </a>
        </li>
        <li class="lift_item">
            <a href="#" class="lift_btn">
                <span>本周简介</span>
            </a>
        </li>
        <li class="lift_item">
            <a href="#" class="lift_btn">
                <span>惹人心醉</span>
            </a>
        </li>
        <li class="lift_item">
            <a href="#" class="lift_btn">
                <span >跟哥走吧</span>
            </a>
        </li>
    </ul>
</div>
</body>
<script src="js/index/jquery.js"></script>
<script type="text/javascript" src="js/header/header1.js"></script>
<script src="js/index/index.js"></script>
<script type="text/javascript" src="js/footer/footer.js"></script>
</html>